<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test-Layout</title>
  <style type="text/css">
    a {
      color: #000;
    }
    a:hover {
      text-decoration: none;
    }
    #layout {
      width: 100%;
      max-width: 800px; /**/
      margin: auto;
      border: 1px solid;
      border-collapse: collapse;
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 12px;
    }
    #layout td {
      border: 1px solid;
      padding: 5px;
    }
    #books {
      width: 150px;
    }
    #search {
      text-align: right;
    }
    #card h2 {
      margin: 0px;
    }
    #card div {
      width: 50%;
    }
    div.left {
      float: left;
    }
    div.right {
      float: right;
    }
    #card h4 {
      margin: 1px;
      margin-top: 10px;
      margin-bottom: 5px;
      color: #FFF;
      background-color: #A0C0FF;
    }
    #card ul {
      margin: 0px;
      padding-left: 20px;
    }
  </style>
</head>
<body>
	<h2>Visitenkarte von Johannes Kissel</h2>
	<div class="left">
		<h4>Kontakt</h4>
		<ul>
			<li>Name: Johannes Kissel</li>
			<li>Spitzname: {NickName}</li>
			<li>Mail: <a href="mailto:django_k@gmx.de">django_k@gmx.de</a></li>
			<li>Zus&auml;tzliche Mail: <a href="mailto:johannes.kissel@gmx.net">johannes.kissel@gmx.net</a></li>
		</ul>
	</div>
	<div class="right">
		<h4>Telefon</h4>
		<ul>
			<li>Privat: 06324 / 5913200</li>
			<li>Arbeit: 07247 / 822409</li>
			<li>Handy: 0174 / 5283753</li>
			<li>Fax: 07247 / 822409</li>
		</ul>
	</div>
	<div class="left">
		<h4>Adresse (Privat)</h4>
		<ul>
			<li>Nancystr. 4 / D 106</li>
			<li>76187 Karlsruhe (Ba-W&uuml;)</li>
			<li>Deutschland</li>
			<li><a href="http://pix-nw.de">pix-nw.de</a></li>
		</ul>
	</div>
	<div class="right">
		<h4>Adresse (Arbeit)</h4>
		<ul>
			<li>Herr</li>
			<li>Forschungszentrum Karlsruhe GmbH</li>
			<li>Institut f&uuml;r Prozessdatenverarbeitung und Elektronik</li>
			<li>Hermann-von-Helmholtz-Platz 1</li>
			<li>76344 Eggenstein-Leopoldshafen (Ba-W&uuml;)</li>
			<li>Deutschland</li>
			<li><a href="http://www.fzk.de">www.fzk.de</a></li>
		</ul>
	</div>
	<div class="left">
		<h4>Sonstiges</h4>
			Test<br>
			Bla
	</div>
</body>
</html>